<?= flash() ?? ''; ?>

<div class="breadcrumb d-flex align-items-center px-3 js-top js-scroll">
    <?php if(session('user_id')): ?>
        <div class="btn btn-icon me-3 hidden-lg hidden-md hidden-sm" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
            <img class="avatar avatar-xs rounded-pill" src="<?= get_avatar(session('user_id')) ?>" alt="">
        </div>
    <?php else: ?>
        <a role="button" class="btn btn-icon me-3 hidden-lg hidden-md hidden-sm" href="/user-login">
            <i class="iconfont icon-user"></i>
        </a>
    <?php endif; ?>
    <h2 class="w-100 fs-18 hand js-top"><?= $page_title ?? ''; ?></h2>
    <div class="dropdown">
        <button class="btn btn-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="iconfont icon-magic"></i></button>
        <div class="dropdown-menu dropdown-menu-end shadow-sm">
            <div class="dropdown-item p-3 border-bottom text-center arrow bg-white">
                <img class="mb-2" src="/img/magic.svg" width="48" height="48" alt="">
                <p class="fw-bold fs-18">主页优先显示热门帖子</p>
            </div>
            <a class="dropdown-item" href="#">
                <i class="iconfont icon-exchange me-2"></i>
                <span class="fw-bold">切换查看最新帖子</span>
            </a>
            <a class="dropdown-item" href="#">
                <i class="iconfont icon-settings me-2"></i>
                <span class="fw-bold">查看内容偏好设置</span>
            </a>
        </div>
    </div>
</div>

<?php if(!session('user_id')): ?>
    <div class="banner px-3 d-flex flex-column justify-content-center align-items-center">
        <p class="fs-20 mb-3 fw-bold">登录之后，更精彩！</p>
        <div class="d-flex">
            <a role="button" class="btn btn-secondary" href="/user/login">登录</a>
            <a role="button" class="btn btn-outline ms-2" href="/user/register">注册</a>
        </div>
    </div>
<?php endif; ?>

<div class="alert mb-0 p-4 border-0 border-bottom text-center alert-dismissible fade show" id="js-show-once" role="alert">
    <b class="fs-20">每日帖不过３😉</b>
    <p class="mt-1 mb-3 text-muted">友情提示，发帖和回帖都需要<i class="squiggle">扣除１个金币</i>哦！</p>
    <a class="btn btn-secondary rounded-pill" href="/reward/">
        <i class="iconfont icon-present me-2"></i>领取今日登录奖励
    </a>
</div>

<!-- <nav class="nav nav-justified border-bottom">
    <a class="nav-link active" href="/" data-active="home-news">热门</a>
    <a class="nav-link" href="/user/follow" data-active="home-follow">正在关注</a>
</nav> -->

<?php include APP_PATH . 'post/views/_list.php'; ?>

<?php if($posts[1]->totalRows !== 0): ?>
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center p-3">
        <li class="page-item"><a class="page-link" href="<?= $posts[1]->prevPage;?>"><span aria-hidden="true">&lsaquo;</span></a></li>
        <?php foreach($posts[1]->listPage as $k=>$v): ?>
            <?php if($k == $posts[1]->currentPage): ?>
                <li class="page-item"><a class="page-link active" href="<?= $v ?>"><?= $k ?></a></li>
            <?php else: ?>
                <li class="page-item"><a class="page-link" href="<?= $v ?>"><?= $k ?></a></li>
            <?php endif ?>
        <?php endforeach ?>
        <li class="page-item"><a class="page-link" href="<?= $posts[1]->nextPage;?>"><span aria-hidden="true">&rsaquo;</span></a></li>
    </ul>
</nav>
<?php endif ?>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
  <div class="d-flex flex-column">
                <h1 class="app-logo py-3" role="heading">
                    <a href="/"><img class="rounded-circle" src="/img/logo.png" alt=""></a>
                </h1>
                <nav class="app-nav d-flex flex-column" role="navigation">
                    <a href="/" class="app-link" data-active="home" title="主页">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-home"></i>
                            <div class="nav-link px-3 fs-18">主页</div>
                            <div class="unread-dot"></div>
                        </div>
                    </a>
                    <a href="/q" class="app-link" data-active="group" title="群">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-pal"></i>
                            <div class="nav-link px-3 fs-18">群</div>
                        </div>
                    </a>
                    <!-- <a class="app-link" id="js-nav-explore" href="/explore" data-active="explore" title="探索">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-search"></i>
                            <div class="nav-link px-3 fs-18">探索</div>
                        </div>
                    </a> -->
                    <!-- <a class="app-link" href="/post" data-active="post" title="探索">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-topics"></i>
                            <div class="nav-link px-3 fs-18">动态</div>
                        </div>
                    </a> -->
                    <a href="/reward" class="app-link" data-active="reward" title="奖励">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-present"></i>
                            <div class="nav-link px-3 fs-18">奖励</div>
                        </div>
                    </a>
                    <a href="/medal" class="app-link" data-active="medal" title="勋章">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-medal"></i>
                            <div class="nav-link px-3 fs-18">勋章</div>
                        </div>
                    </a>
                    <!-- <a class="app-link" href="/message" data-active="message" title="消息">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-notifications"></i>
                            <div class="nav-link px-3 fs-18">消息</div>
                            <div class="unread-message">2</div>
                        </div>
                    </a> -->
                <?php if(session('user_id')): ?>
                    <a class="app-link" href="/user/profile/<?= session('user_id') ?>" data-active="user" title="个人资料">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-user"></i>
                            <div class="nav-link px-3 fs-18">个人资料</div>
                        </div>
                    </a>
                    <div class="dropup">
                        <a class="app-link" href="###" data-bs-toggle="dropdown" aria-expanded="false" data-active="more" title="更多">
                            <div class="nav-item d-inline-flex">
                                <i class="iconfont icon-more3"></i>
                                <div class="nav-link px-3 fs-18">更多</div>
                            </div>
                        </a>
                        <ul class="dropdown-menu shadow">
                            <li><a class="dropdown-item" href="/user/logout">退出</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-primary create-post rounded-pill hidden-md hidden-xs hidden-sm" data-bs-toggle="modal" data-bs-target="#createPost">
                        <i class="iconfont icon-feather hidden-lg hidden-md"></i>
                        <div class="nav-link">发帖</div>
                    </button>
                    <!-- 小屏显示的发帖按钮 -->
                    <a href="javaxript:;" class="twteet-btn hidden-lg" data-bs-toggle="modal" data-bs-target="#createPost" title="发帖">
                        <div class="nav-item d-inline-flex justify-content-center">
                            <i class="iconfont icon-feather"></i>
                        </div>
                    </a>
                <?php else: ?>
                    <a class="app-link" href="/user/login" data-active="user" title="登录">
                        <div class="nav-item d-inline-flex">
                            <i class="iconfont icon-user"></i>
                            <div class="nav-link px-3 fs-18">登录</div>
                        </div>
                    </a>
                <?php endif; ?>
                </nav>
            </div>
  </div>
</div>

<script>
    // 确保DOM加载完毕
    document.addEventListener('DOMContentLoaded', () => {
        highlightActiveLink('home');
        Gifffer();
    });
</script>